<template>
	<view>
		<view class="content">
			<u-navbar :fixed="false" title="报工列表" :autoBack="false" leftIcon=" " :safeAreaInsetTop="true"
				leftIconColor="#fff" rightIconColor="#fff" @rightClick="rightClick">
				<view class="u-nav-slot" slot="right">
					<view class="navRightBox" :style="{border: isFilter ? '2px solid #fff' : 'none'}">
						<text>筛选</text>
					</view>
				</view>
			</u-navbar>

			<u-list class="MainBox" @scrolltolower="scrolltolower">

				<!-- 数据看板 -->
				<view class="KanbanBox">
					<view class="Kanban_CardBox" v-for="(item,index) in KanbanListData" :key="index"
						:style="{background:item.BackgroundColor}">
						<text>{{item.TextName}}</text>

						<view class="Kanban_CardBox_Value">
							{{item.Value}}
						</view>

						<!-- 样式A -->
						<view class="Style_A"></view>

						<!-- 样式B -->
						<view class="Style_B">
							<view class="Style_B_Round1">
								<view class="Style_B_Round2"></view>
							</view>
						</view>
					</view>
				</view>

				<!-- 吸顶Tab栏 -->
				<u-sticky>
					<view class="x-f" style="justify-content: space-between;">

						<u-tabs style="flex: 1;" :list="TabList" :is-scroll="false" :current="currTabIndex"
							:activeStyle="{color: '#51d0d0',transform: 'scale(1.05)'}" lineWidth="60"
							lineColor="#51d0d0" :scrollable="false" @change="changeTab">

							<template #TabText="{element,index}">
								{{element.name}} {{element.value}}
							</template>

							<view slot="right" class="x-f" style="padding-left: 4px;padding-right: 15px;">
								<!-- <uni-icons style="margin-left: 14px;font-weight: 600;" color="#333" @click="RefreshBtn"
									custom-prefix="iconfont" type="icon-shuaxin1" size="24"></uni-icons> -->

								<uni-icons fontFamily="CustomFontPlatform" style="margin-left: 14px;font-weight: 600;"
									color="#333" @click="RefreshBtn"
									:size="24">{{$utils.toUniCode('&#xe616;')}}</uni-icons>


								<uni-icons fontFamily="CustomFontPlatform" style="margin-left: 14px;font-weight: 600;"
									color="#333" @click="OpenSortPopup"
									:class="sortData.Sort.value.toLowerCase() == 'desc' ? '' : 'icon-flip-vertical'"
									:size="24">{{ $utils.toUniCode('&#xe7e9;')}}</uni-icons>
							</view>
						</u-tabs>
					</view>
				</u-sticky>

				<!-- 列表数据 -->
				<view v-if="currTabIndex == 0">
					<u-list-item v-for="(item, index) in CardListData" :key="index" style="padding: 0 30rpx;">
						<view class="CardBox" @click="ToWorkCardInfo(item)">
							<u-tag v-if="item.Days > 24" style="position: absolute;right: 10px;top: 10px;" text="超期"
								type="error"></u-tag>

							<!-- <uni-icons v-if="item.Approve" color="#c5e6db" custom-prefix="iconfont" type="icon-Approval"
								size="100rpx" style="position: absolute;right: 10px;bottom: 10px;"></uni-icons> -->


							<view class="TitleName" style="font-size: 32rpx;font-weight: 600;">
								<text>{{item.FProcessManName}}</text>
								<text style="margin: 0 4rpx;">|</text>
								<text>{{item.ProcedureName}}</text>
							</view>

							<view class="CardMainData" style="margin-top: 6px;">

								<m-field label="报工单号:" :value="item.BGBillNO" valueFontSize="28rpx"
									labelFontSize="28rpx" paddings="8rpx 0" :borderBottom="false" valueColor="#999">
								</m-field>

								<m-field label="工单编号:" valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0"
									:borderBottom="false" valueColor="#40c716">
									<template #custom-value>
										<text @click.stop="ToTicket(item)">{{item.WoBillNO}}</text>
									</template>
								</m-field>

								<m-field label="派工单号:" v-if="item.JobBillNO" :value="item.JobBillNO"
									valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" :borderBottom="false"
									valueColor="#999"></m-field>

								<m-field label="产品名称:" :value="item.ProductCode" valueFontSize="28rpx"
									labelFontSize="28rpx" paddings="8rpx 0" :borderBottom="false" valueColor="#999">
								</m-field>

								<m-field label="计价方式:" :value="ShowTextFun('PieceTime',item.PieceTime)"
									valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" :borderBottom="false"
									valueColor="#999"></m-field>

								<m-field label="单据日期:"
									:value="Request.dateFormat(new Date(item.BillDate), 'Y-MM-dd hh:mm:ss')"
									valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" :borderBottom="false"
									valueColor="#999"></m-field>

								<!-- <m-field label="报工时长:" value="0小时0分钟" valueFontSize="28rpx" labelFontSize="28rpx"
								paddings="8rpx 0" :borderBottom="false" valueColor="#999"></m-field> -->
							</view>
						</view>
					</u-list-item>
					<!-- 列表状态 -->
					<u-loadmore v-if="CardListData.length" :status="CardLoadStatus"></u-loadmore>
				</view>

				<view v-else-if="currTabIndex == 1">
					<u-list-item v-for="(item, index) in AuditCardListData" :key="index" style="padding: 0 30rpx;">
						<view class="CardBox" @click="ToWorkCardInfo(item)">

							<!-- <uni-icons v-if="item.Approve" color="#a3e8c3" custom-prefix="iconfont" type="icon-Audit"
								size="100rpx" style="position: absolute;right: 10px;bottom: 10px;"></uni-icons> -->


							<uni-icons v-if="item.Approve" fontFamily="CustomFontPlatform" color="#a3e8c3" size="100rpx"
								style="position: absolute;right: 10px;bottom: 10px;">{{$utils.toUniCode('&#xeda6;')}}</uni-icons>

							<view class="TitleName" style="font-size: 32rpx;font-weight: 600;">
								<text>{{item.FProcessManName}}</text>
								<text style="margin: 0 4rpx;">|</text>
								<text>{{item.ProcedureName}}</text>
							</view>

							<view class="CardMainData" style="margin-top: 6px;">
								<m-field label="派工单号:" :value="item.JobBillNO" valueFontSize="28rpx"
									labelFontSize="28rpx" paddings="8rpx 0" :borderBottom="false" valueColor="#999">
								</m-field>

								<m-field label="工单编号:" valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0"
									:borderBottom="false" valueColor="#40c716">
									<template #custom-value>
										<text @click.stop="ToTicket(item)">{{item.WoBillNO}}</text>
									</template>
								</m-field>

								<m-field label="产品名称:" :value="item.ProductCode" valueFontSize="28rpx"
									labelFontSize="28rpx" paddings="8rpx 0" :borderBottom="false" valueColor="#999">
								</m-field>

								<m-field label="计价方式:" :value="ShowTextFun('PieceTime',item.PieceTime)"
									valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" :borderBottom="false"
									valueColor="#999"></m-field>

								<m-field label="单据日期:"
									:value="Request.dateFormat(new Date(item.BillDate), 'Y-MM-dd hh:mm:ss')"
									valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" :borderBottom="false"
									valueColor="#999"></m-field>

								<!-- <m-field label="报工时长:" value="0小时0分钟" valueFontSize="28rpx" labelFontSize="28rpx"
								paddings="8rpx 0" :borderBottom="false" valueColor="#999"></m-field> -->
							</view>
						</view>
					</u-list-item>
					<!-- 列表状态 -->
					<u-loadmore v-if="AuditCardListData.length" :status="AuditCardLoadStatus"></u-loadmore>
				</view>


				<u-empty
					v-if="currTabIndex == 0 && !CardListData.length || currTabIndex == 1 && !AuditCardListData.length"
					mode="data" :text="currTabIndex == 0 ? '无相关未审核项' : '无相关已审核项'" icon="/static/image/Img/DataEmpty.png"
					width="50vw" height="50vw">
				</u-empty>

			</u-list>

			<zdy-tabbar style="width: 100%;" :current-page="currentID"></zdy-tabbar>


			<!-- 悬浮按钮_新增 -->
			<m-drag-button :style="{ opacity: BtnShow ? 1 : 0, }" :isDock="true" :existTabBar="true" :initialBottom="80"
				@btnClick="ToAddWorkBtn">
				<template #BtnContent>
					<u-icon name="plus" color="#fff" size="54rpx"></u-icon>
				</template>
			</m-drag-button>

		</view>


		<!-- 筛选弹层 -->
		<uni-popup ref="popup_filter" class="MainPopup" style="z-index: 999999 !important;" type="right"
			background-color="#ffffff" @close="closeFilterPopup">
			<view class="f-dc" style="width: 80vw;height: 100vh;">
				<u-navbar :fixed="false" title="筛选" :autoBack="false" leftIcon=" " :safeAreaInsetTop="true"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeFilterPopup"></uni-icons>
					</view>
				</u-navbar>

				<view class="MainBox f-dc FilterMainBox">

					<view class="TitleBox">
						<view style="font-size: 14px;">单据日期</view>

						<view class="Select_Box">
							<view class="x-f Select_Date" v-for="(item,index) in DateList" :key="index"
								:class="[selectData == index ? 'Select_Date_Active' : '']"
								@click="SelectDateFun(item,index)">
								<text>{{item.Text}}</text>
								<text>{{item.nums}}</text>
							</view>

							<view class="ChoiceTimesBox" v-if="selectData == 5">

								<!-- <u-icon name="calendar" color="#999" size="20"></u-icon> -->


								<view class="TimeBox">

									<view class="StartTime timer" @click="ChoiceTime('start')">
										<text>开始时间</text>
										<text class="Date_Text">{{dateFormat(FilterFormData.StartTime)}}</text>
									</view>

									<view class="Icon">
										<u-icon name="minus" size="30"></u-icon>
									</view>

									<view class="EndTime timer" @click="ChoiceTime('end')">
										<text>结束时间</text>
										<text class="Date_Text">{{dateFormat(FilterFormData.EndTime)}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>


					<view class="TitleBox" v-if="!currTabIndex">
						<view style="font-size: 14px;margin-bottom: 16rpx;">是否超时</view>

						<view>
							<m-radio :options="radioOptions" v-model="FilterFormData.Timeout" borderRadius="9999px"
								contentActiveColor="#e1f7f8" contentActiveTextColor="#51d0d0" shape="square"
								fontSize="14px" @change="handleRadioChange"></m-radio>

						</view>
					</view>

					<view class="TitleBox">
						<view style="font-size: 14px;margin-bottom: 16rpx;">车间</view>

						<view @click="openSelectScreen('车间')">
							<u--input placeholder="请选择" v-model="FilterFormData.FWorkshopName" readonly border="bottom"
								suffixIcon="arrow-right" suffixIconStyle="color: #999"></u--input>
						</view>
					</view>

					<view class="TitleBox">
						<view style="font-size: 14px;margin-bottom: 16rpx;">物料信息</view>

						<view @click="openSelectScreen('物料')">
							<u--input placeholder="请选择" v-model="FilterFormData.ProductName" readonly border="bottom"
								suffixIcon="arrow-right" suffixIconStyle="color: #999"></u--input>
						</view>
					</view>

					<view class="TitleBox">
						<view style="font-size: 14px;margin-bottom: 16rpx;">工序</view>

						<view @click="openSelectScreen('工序')">
							<u--input placeholder="请选择" v-model="FilterFormData.ProcedureName" readonly border="bottom"
								suffixIcon="arrow-right" suffixIconStyle="color: #999"></u--input>
						</view>
					</view>

					<view class="TitleBox">
						<view style="font-size: 14px;margin-bottom: 16rpx;">作业员</view>

						<view @click="openSelectScreen('作业员')">
							<u--input placeholder="请选择" v-model="FilterFormData.EmplName" readonly border="bottom"
								suffixIcon="arrow-right" suffixIconStyle="color: #999"></u--input>
						</view>
					</view>
				</view>

				<view class="PopupBottomBox x-f" :style="$utils.disposeSafeBottomFun()">
					<button @click="ResetFilterBtn">重置</button>
					<button @click="ComfirmFilterBtn">筛选</button>
				</view>
			</view>
		</uni-popup>

		<!-- 排序弹层 -->
		<uni-popup ref="popup_sort" style="z-index: 999999 !important;" type="bottom" background-color="#ffffff"
			@close="closeSortPopup">
			<view class="f-dc" style="max-height: 80vh;" :style="$utils.disposeSafeBottomFun()">
				<u-navbar :fixed="false" title="排序" :autoBack="false" leftIcon=" " :safeAreaInsetTop="false"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeSortPopup"></uni-icons>
					</view>
				</u-navbar>

				<view class="MainBox" style="padding: 15px;flex: 1;overflow: auto;padding-bottom: 20px;">
					<m-sort :sortOptions="sortOptions" :defaultSort="defaultSort" :selectSort="sortData.Sort"
						@change="handleSortChange"></m-sort>
				</view>
			</view>
		</uni-popup>

		<!-- 时间选择器 -->
		<u-datetime-picker class="DateTimerPick" ref="datetimePicker" :title="PickerTitle" :show="showTimePicker"
			v-model="DatetimeData" mode="date" :closeOnClickOverlay="true" @close="ClosePicker" @cancel="ClosePicker"
			@confirm="ConfirmTime" :formatter="formatter"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				FCJType: null, // 查询公司报工类型

				DatetimeData: Number(new Date()), // 时间选择器时间
				showTimePicker: false, // 时间选择器弹层显示
				TimeType: '', // 区分时间 start - 开始 ， end - 结束
				PickerTitle: '', // 时间弹层标题
				radioOptions: [{
					content: '全部',
					id: 0,
				}, {
					content: '未超时',
					id: 1,
				}, {
					content: '超时',
					id: 2,
				}],
				FilterFormData: {
					StartTime: new Date(),
					EndTime: new Date(),

					Timeout: 0, // 是否超时选项

					FWorkshopData: [], // 车间选中数据
					FWorkshopName: '', // 

					ProductData: [], // 物料选中数据
					ProductName: '',

					ProcedureData: [], // 工序
					ProcedureName: '', //

					EmplData: [], // 作业员
					EmplName: '', // 
				},

				ShowTimePopup: false, // 选择时间弹层
				DateList: [{
						Text: '今天',
						nums: null,
						id: 1,
					},
					{
						Text: '昨天',
						nums: null,
						id: 2,
					},
					{
						Text: '本月',
						nums: null,
						id: 3,
					},
					{
						Text: '上月',
						nums: null,
						id: 4,
					},
					{
						Text: '全部',
						nums: null,
						id: 5,
					}, {
						Text: '自定义时间',
						nums: null,
						id: 6,
					},
				],
				selectData: 0, // 默认选中项
				SelectDateItem: { // 选中数据
					Text: '今天',
					nums: null,
					id: 1,
				},

				KanbanListData: [{
						TextName: '报工单数量',
						Value: '0',
						BackgroundColor: '#47aaff',
					},
					{
						TextName: '合格率',
						Value: '0.00%',
						BackgroundColor: '#43d489',
					},
					{
						TextName: '合格总数',
						Value: '0',
						BackgroundColor: '#fbb030',
					},
					{
						TextName: '不合格总数',
						Value: '0',
						BackgroundColor: '#ff6a52',
					},
				],

				TabList: [{
						name: '未审核',
						value: null,
						badge: {
							value: null,
						}
					},
					{
						name: '已审核',
						value: null,
						badge: {
							value: null,
						}
					},
				],
				currTabIndex: 0,

				CardListData: [], // 列表数据
				CardLoadStatus: 'loadmore', // 列表数据状态
				CardTotal: 0,
				scrolltolowerTimer: null, // 触底加载防抖

				AuditCardListData: [], // 已审核列表数据
				AuditCardLoadStatus: 'loadmore', // 列表数据状态
				AuditCardTotal: 0,

				page: { // 列表分页数据
					pageIndex: 1, // 未审核页码
					AuditPageIndex: 1, // 已审核页码
					pageSize: 10,
				},

				sortFields: [{ // 升降序数据
						text: '升序',
						value: 'ASC'
					},
					{
						text: '降序',
						value: 'DESC'
					}
				],
				sortData: { // 选中的排序数据 
					OrderBy: '',
					Sort: {},
				},
				sortOptions: [{ // 排序数据
						id: "1",
						name: "单据编号",
						param: 'A.BillNO',
					},
					{
						id: "2",
						name: "报工时间",
						param: 'A.ActualDate',
					}, {
						id: "3",
						name: "生产员工",
						param: 'D.EmplID',
					},
					{
						id: "4",
						name: "产品",
						param: 'B.ProductID',
					},
					{
						id: "5",
						name: "工序名称",
						param: 'B.ProcedureID',
					},
					{
						id: "6",
						name: "审核时间",
						param: 'A.ApproveTime',
					},
					{
						id: "7",
						name: "创建时间",
						param: 'B.CreateTime',
					},
					{
						id: "8",
						name: "更新时间",
						param: 'B.ModifyTime',
					},
				],
				defaultSort: "1", // 默认选中的排序id

				currentID: null,
				BtnShow: false, // 按钮样式初始化有问题，等加载完再显示
			}
		},
		onShow() {},
		onLoad(option) {
			var that = this;
			this.currentID = +option.TabbarID;


			const workListDate = uni.getStorageSync('WorkListDate');
			if (workListDate) {
				const {
					selectData,
					SelectDateItem,
					DateList
				} = JSON.parse(workListDate);
				that.selectData = selectData;
				that.SelectDateItem = SelectDateItem;
				that.FilterFormData.StartTime = DateList[0];
				that.FilterFormData.EndTime = DateList[1];
			}


			if (uni.getStorageSync('sortData')) { // 获取缓存的排序
				let sortData = JSON.parse(uni.getStorageSync('sortData'));

				this.sortData.OrderBy = sortData.sortData.OrderBy;
				this.defaultSort = sortData.defaultSort;
				this.sortData.Sort = sortData.sortData.Sort;

			} else {
				// 无排序缓存
				// 选中排序数据
				this.sortData.OrderBy = this.sortOptions[0]['param'];
				this.defaultSort = this.sortOptions[0]['id'];
				this.sortData.Sort = this.sortFields[1];

				let sortData = {
					defaultSort: this.defaultSort,
					sortData: this.sortData
				}

				uni.setStorageSync('sortData', JSON.stringify(sortData))
			}


			// 查询公司报工类型
			that.FCJType = this.$store.getters.GetFCJType;

			setTimeout(() => {
				// 获取顶部数据
				that.getXGD_DailyOutputTitle();
				// 获取列表初始数据（未审核、已审核）
				that.GetAllListInfo();

			}, 300);
		},
		computed: {
			isFilter() { // 是否筛选
				return !!(
					this.FilterFormData.FWorkshopName ||
					this.FilterFormData.ProductName ||
					this.FilterFormData.ProcedureName ||
					this.FilterFormData.EmplName
				);
			},
			indexName() { // 切换tab展示的分页页码字段
				return this.currTabIndex === 1 ? 'AuditPageIndex' : 'pageIndex';
			},
			dataListName() { // 切换tab展示的列表字段
				return this.currTabIndex === 1 ? 'AuditCardListData' : 'CardListData';
			},
			loadmoreStatus() { // 切换tab展示的加载字段
				return this.currTabIndex === 1 ? 'AuditCardLoadStatus' : 'CardLoadStatus';
			},
			CardTotalName() { // 列表总数字段
				return this.currTabIndex === 1 ? 'AuditCardTotal' : 'CardTotal';
			},
		},
		mounted() {
			var that = this;

			setTimeout(() => {
				that.BtnShow = true;
			}, 500)
			// 监听 选择产品
			uni.$on('WorkList_Choice', function(ret) {
				const dataCopy = JSON.parse(JSON.stringify(ret.data));
				switch (ret.type) {
					case '车间':
						that.FilterFormData.FWorkshopData = dataCopy;
						that.FilterFormData.FWorkshopName = dataCopy.map(item => item.FWorkshopName).join('、');
						break;
					case '物料':
						that.FilterFormData.ProductData = dataCopy;
						that.FilterFormData.ProductName = dataCopy.map(item => item.ProductName).join('、');
						break;
					case '工序':
						that.FilterFormData.ProcedureData = dataCopy;
						that.FilterFormData.ProcedureName = dataCopy.map(item => item.ProcedureName).join('、');
						break;
					case '作业员':
						that.FilterFormData.EmplData = dataCopy;
						that.FilterFormData.EmplName = dataCopy.map(item => item.EmplName).join('、');
						break;
					default:
						break;
				}
			});

			// 监听报工页面监听事件
			uni.$on('Refresh', function(data) {
				that.RefreshBtn();
			})

		},
		onUnload() {
			var that = this;
		},
		methods: {
			ShowTextFun(str, data) { // 显示字段的返回映射
				let backText = '';
				switch (str) {
					case 'PieceTime':
						if (this.$utils.isEmpty(data)) {
							backText = ''
						} else {
							if (data == 0) {
								backText = '计件'
							} else if (data == 1) {
								backText = '计时'
							}
						}
						break;
					default:
						break;
				}

				return backText;
			},
			handleRadioChange(data) { // 筛选弹层是否超时选项

				this.FilterFormData.Timeout = data.data.id;
			},
			getXGD_DailyOutputTitle() { // 获取看板数据
				let that = this;
				let FWorkshopID = this.FilterFormData.FWorkshopData.map(item => item.FWorkshopID); // 车间
				let ProductID = this.FilterFormData.ProductData.map(item => item.ProductID); // 物料
				let ProcedureID = this.FilterFormData.ProcedureData.map(item => item.ProcedureID); // 物料
				let EmplID = this.FilterFormData.EmplData.map(item => item.EmplID); // 物料


				let obj = {
					FSDate: that.YMDDateFormate(that.FilterFormData.StartTime), // 开始日期
					FEDate: that.YMDDateFormate(that.FilterFormData.EndTime), // 结束日期
					FWorkshopID: FWorkshopID.join(','), // 车间
					ProductID: ProductID.join(','), // 物料ID
					ProcedureID: ProcedureID.join(','), // 工序ID
					EmplID: EmplID.join(','), // 作业员ID
				};

				let submitCmd = 'GD_DailyOutputTitle';
				if (that.FCJType == 1) {

					submitCmd = 'XGD_DailyOutputTitle';
				} else if (that.FCJType == 2) {
					submitCmd = 'GD_DailyOutputTitle';
				}

				try {

					that.$request(submitCmd, obj, function(ret) {
						if (ret.status == 200) {
							that.KanbanListData.forEach((item, index) => {
								if (index == 0) {
									item['Value'] = ret.data.ds[0]['BGDNum'];
								} else if (index == 1) {
									item['Value'] = parseFloat(ret.data.ds[0]['OKRate']).toFixed(2) + '%';
								} else if (index == 2) {
									item['Value'] = ret.data.ds[0]['FDailyQtt'];
								} else if (index == 3) {
									item['Value'] = ret.data.ds[0]['FNgQty'];
								}
							});
						}
					})
				} catch (e) {
					//TODO handle the exception
				}

			},
			openSelectScreen(str) {
				let obj = {};
				if (str == '车间') {

					obj = {
						allowClear: true,
						cmd: 'XGD_Workshop',
						type: str,
						ListeningName: 'WorkList_Choice',
						// multiple: false,
						serverSearch: {
							isPaging: true, //是否分页
							searchKey: 'SearchKey', //搜索关键词，应包含在param中
							showText: 'FWorkshopName', //查询结果显示的字段
							pageIndexStr: 'PageIndex', //分页页码字段，应包含在param中
							ChoiceDataKey: 'FWorkshopID', // 隐藏值
							ChoiceDataData: this.FilterFormData.FWorkshopData, //选中的数据
						},
						param: {
							SearchKey: '',
							PageIndex: 1,
							PageSize: 30
						}
					}
				} else if (str == '物料') {

					obj = {
						allowClear: true,
						cmd: 'XGD_Product',
						type: str,
						ListeningName: 'WorkList_Choice',
						// multiple: false,
						serverSearch: {
							isPaging: true, //是否分页
							searchKey: 'SearchKey', //搜索关键词，应包含在param中
							showText: 'ProductInfo', //查询结果显示的字段
							pageIndexStr: 'PageIndex', //分页页码字段，应包含在param中
							ChoiceDataKey: 'ProductID',
							ChoiceDataData: this.FilterFormData.ProductData,
						},
						param: {
							SearchKey: '',
							PageIndex: 1,
							PageSize: 30
						}
					}
				} else if (str == '工序') {

					obj = {
						allowClear: true,
						cmd: 'XGD_Procedure',
						type: str,
						ListeningName: 'WorkList_Choice',
						// multiple: false,
						serverSearch: {
							isPaging: true, //是否分页
							searchKey: 'SearchKey', //搜索关键词，应包含在param中
							showText: 'ProcedureName', //查询结果显示的字段
							pageIndexStr: 'PageIndex', //分页页码字段，应包含在param中
							ChoiceDataKey: 'ProcedureID',
							ChoiceDataData: this.FilterFormData.ProcedureData,
						},
						param: {
							SearchKey: '',
							PageIndex: 1,
							PageSize: 30,
						}
					}
				} else if (str == '作业员') {

					obj = {
						allowClear: true,
						cmd: 'XGD_Employee',
						type: str,
						ListeningName: 'WorkList_Choice',
						// multiple: false,
						serverSearch: {
							isPaging: true, //是否分页
							searchKey: 'EmplCode', //搜索关键词，应包含在param中
							showText: 'EmplName', //查询结果显示的字段
							pageIndexStr: 'Pageindex', //分页页码字段，应包含在param中
							ChoiceDataKey: 'EmplID',
							ChoiceDataData: this.FilterFormData.EmplData,
						},
						param: {
							EmplCode: '',
							Pageindex: 1,
							PageSize: 30
						}
					}
				}

				// return
				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'BaseScreenParm',
					data: obj
				})

				uni.navigateTo({
					url: '/commonPage/Tool/SelectBaseScreen',
					fail(err) {
						console.log(err)
					}
				})
			},

			ChoiceTime(type) { // 点击时间
				var that = this;
				this.TimeType = type;
				let dates = new Date();
				if (type == 'start') {
					if (!that.$utils.isEmpty(that.FilterFormData.StartTime)) {
						dates = that.FilterFormData.StartTime;
					}
					that.DatetimeData = Number(dates);
					this.PickerTitle = '开始时间';
				} else if (type == 'end') {
					if (!that.$utils.isEmpty(that.FilterFormData.EndTime)) {
						dates = that.FilterFormData.EndTime;
					}
					that.DatetimeData = Number(dates);
					this.PickerTitle = '结束时间';
				} else {
					that.DatetimeData = Number(new Date());
					this.PickerTitle = '';
				}

				that.showTimePicker = true;
			},
			dateFormat(val) { // 格式化时间
				var that = this;
				if (!that.$utils.isEmpty(val)) {
					return that.Request.dateFormat(new Date(val), 'Y-MM-dd');
				} else {
					// return '请选择'
					return that.Request.dateFormat(new Date(), 'Y-MM-dd');
				}
			},
			formatter(type, value) { // 时间选择器数据格式化
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			ClosePicker() { // 关闭时间选择器
				this.DatetimeData = Number(new Date());
				this.showTimePicker = false;
			},
			ConfirmTime(data) { // 确认时间

				if (this.TimeType == 'start') {

					if (!this.$utils.isEmpty(this.FilterFormData.EndTime) && Number(data.value) > Number(this
							.FilterFormData
							.EndTime)) {
						return uni.showToast({
							title: '开始时间不能高于结束时间',
							icon: 'none'
						});
					}

					this.FilterFormData.StartTime = data.value;
				} else if (this.TimeType == 'end') {
					if (!this.$utils.isEmpty(this.FilterFormData.StartTime) && Number(data.value) < Number(this
							.FilterFormData
							.StartTime)) {
						return uni.showToast({
							title: '结束时间不能低于开始时间',
							icon: 'none'
						});
					}
					this.FilterFormData.EndTime = data.value;
				}
				this.showTimePicker = false;
			},
			rightClick() { // 导航栏打开筛选
				this.$refs.popup_filter.open();
			},
			/**
			 * 关闭筛选弹层
			 */
			closeFilterPopup() { // 关闭筛选弹层
				this.$refs.popup_filter.close();
			},
			/**
			 * 筛选弹层重置按钮
			 */
			ResetFilterBtn() { // 筛选弹层重置按钮
				let that = this;

				Object.keys(that.FilterFormData).forEach((key) => {
					if (!['StartTime', 'EndTime'].includes(key)) {
						if (Array.isArray(that.FilterFormData[key])) {
							that.FilterFormData[key] = [];
						} else if (typeof that.FilterFormData[key] === 'object') {
							that.FilterFormData[key] = {};
						} else {
							that.FilterFormData[key] = '';
						}
					}
				});
				that.closeFilterPopup();

				that.RefreshBtn();
			},
			/**
			 * 筛选弹层确认按钮
			 */
			ComfirmFilterBtn() { // 筛选弹层确认按钮
				let that = this;
				let StartDate = '';
				let EndDate = '';
				var today = new Date();
				switch (this.selectData) {
					case 0: // 今天
						StartDate = new Date();
						EndDate = new Date();
						break;
					case 1: // 昨天
						var yesterday = new Date(today);
						yesterday.setDate(today.getDate() - 1);
						StartDate = yesterday;
						EndDate = yesterday;
						break;
					case 2: // 本月
						StartDate = new Date(today.getFullYear(), today.getMonth(), 1);
						EndDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);
						break;
					case 3: // 上月
						StartDate = new Date(today.getFullYear(), today.getMonth() - 1, 1);
						EndDate = new Date(today.getFullYear(), today.getMonth(), 0);
						break;
					case 4: // 全部
						// Add logic for all
						break;
					case 5: // 自定义时间
						StartDate = that.FilterFormData.StartTime;
						EndDate = that.FilterFormData.EndTime;
						break;
					default:
						break;
				};

				that.FilterFormData.StartTime = that.YMDDateFormate(StartDate);
				that.FilterFormData.EndTime = that.YMDDateFormate(EndDate);
				let DateList = [that.FilterFormData.StartTime, that.FilterFormData.EndTime];
				let DateObj = {
					DateList: DateList,
					selectData: that.selectData,
					SelectDateItem: that.DateList[that.selectData],
				}
				uni.setStorageSync('WorkListDate', JSON.stringify(DateObj));


				that.closeFilterPopup();

				that.RefreshBtn();
			},
			/** 固定转换年月日
			 * @param {*} data 时间
			 * @return {type} 如果 data 有值，返回时间字符串 ；反之返回空
			 */
			YMDDateFormate(data) { // 转换年月日
				if (data) {
					var date = new Date(data);
					var year = date.getFullYear();
					var month = (date.getMonth() + 1).toString().padStart(2, '0');
					var day = date.getDate().toString().padStart(2, '0');
					var formattedDate = year + "-" + month + "-" + day;
					return formattedDate;
				} else {
					return '';
				}
			},
			SelectDateFun(data, index) { // 时间主弹层选择时间
				this.selectData = index;
			},
			DateComfirmBtn() { // 时间主弹层确认按钮
				this.SelectDateItem = this.DateList[this.selectData];

				this.ShowTimePopup = false;
			},
			ToggleDatePopup() { // 切换选择时间弹层
				this.ShowTimePopup = !this.ShowTimePopup;
			},

			changeTab(item) { // 切换tab任务
				var that = this;
				this.currTabIndex = item.index;
			},
			closeSortPopup() { // 关闭排序弹层 
				this.$refs.popup_sort.close()
			},
			OpenSortPopup() { // 点击打开排序 
				this.$refs.popup_sort.open()
			},
			handleSortChange(sortData) { // 选中排序
				let that = this;
				const {
					sort: {
						param,
						id
					},
					item
				} = sortData;

				// 关闭排序弹层
				this.closeSortPopup();

				// 在这里处理排序改变的逻辑
				setTimeout(() => {
					that.sortData.OrderBy = param;
					that.defaultSort = id;
					that.sortData.Sort = item;

					let SetInfo = {
						defaultSort: that.defaultSort,
						sortData: that.sortData,
					}
					uni.setStorageSync('sortData', JSON.stringify(SetInfo))
					that.ComfirmFilterBtn();
					// RefreshBtn
				}, 50);;

			},
			/**
			 * 刷新页面，重新获取数据，不会清除筛选项
			 */
			RefreshBtn() { // 刷新
				let that = this;
				clearTimeout(that.scrolltolowerTimer);

				that.scrolltolowerTimer = setTimeout(() => {
					that.getXGD_DailyOutputTitle();
					that.page['pageIndex'] = 1;
					that.page['AuditPageIndex'] = 1;
					that.CardListData = [];
					that.AuditCardListData = [];

					that.GetAllListInfo();
				}, 500)
			},
			scrolltolower() { // 触底加载
				let that = this;
				if (that[that.loadmoreStatus] == 'nomore') return;
				that[that.loadmoreStatus] = 'loading';
				clearTimeout(that.scrolltolowerTimer);


				that.scrolltolowerTimer = setTimeout(() => {
					let obj = {
						indexName: that.indexName,
						loadmoreStatus: that.loadmoreStatus,
						dataListName: that.dataListName,
						Approve: that.currTabIndex,
					};
					that.GetListInfo(obj);
				}, 500)
			},
			/** 获取指定项的数据
			 * @param {Object} data 初始数据 例如：{indexName:页码 loadmoreStatus:加载状态 dataListName:数组名称 Approve:审核状态}
			 */
			GetListInfo(data) {
				let that = this;
				if (that[data.loadmoreStatus] == 'nomore') return;
				that[data.loadmoreStatus] = 'loading';

				this.$utils.showLoading();

				let FWorkshopID = this.FilterFormData.FWorkshopData.map(item => item.FWorkshopID); // 车间
				let ProductID = this.FilterFormData.ProductData.map(item => item.ProductID); // 物料
				let ProcedureID = this.FilterFormData.ProcedureData.map(item => item.ProcedureID); // 物料
				let EmplID = this.FilterFormData.EmplData.map(item => item.EmplID); // 物料


				let obj = {
					Pageindex: that.page[data.indexName],
					PageSize: that.page.pageSize,
					OrderType: that.sortData.Sort['value'], // 排序顺序
					OrderName: that.sortData.OrderBy, // 排序字段
					Approve: data.Approve,
					FBDate: that.YMDDateFormate(that.FilterFormData.StartTime), // 开始日期
					FEDate: that.YMDDateFormate(that.FilterFormData.EndTime), // 结束日期
					FWorkshopID: FWorkshopID.join(','), // 车间
					ProductID: ProductID.join(','), // 物料ID
					ProcedureID: ProcedureID.join(','), // 工序ID
					EmplID: EmplID.join(','), // 作业员ID
					FCJType: that.FCJType,
				};

				if (data.Approve == 1) {
					obj['Timeout'] = 0;
				} else {
					obj['Timeout'] = that.FilterFormData.Timeout;
				}

				try {

					that.$request('XGD_DailyOutput', obj, function(ret) {
						if (ret.status == 200) {

							that[that.CardTotalName] = ret.data.ds1[0].Total;

							let Totals = null;
							if (ret.data.ds1[0].Total != 0) {
								Totals = ret.data.ds1[0].Total;
							}
							that.TabList[data.Approve]['value'] = Totals;

							that[data.dataListName].push(...ret.data.ds);

							// 给Tab赋值徽标
							if (data.Approve == 0) { // 未审核，记录超时数量

								const count = that[data.dataListName].filter(item => item.Days > 24).length;
								that.TabList[data.Approve]['badge']['value'] = count;
							}

							that.page[data.indexName]++;

							that[data.loadmoreStatus] = 'loadmore';
							if (that[data.dataListName].length == ret.data.ds1[0].Total) {
								that[data.loadmoreStatus] = 'nomore';
							}

							that.$utils.hideLoading(300)
						} else {
							that[data.loadmoreStatus] = 'nomore'
						}
					})
				} catch (e) {
					//TODO handle the exception
					// console.log(JSON.stringify(e))
				}

			},
			getCommonProperties() {
				let that = this;

				let FWorkshopID = this.FilterFormData.FWorkshopData.map(item => item.FWorkshopID); // 车间
				let ProductID = this.FilterFormData.ProductData.map(item => item.ProductID); // 物料
				let ProcedureID = this.FilterFormData.ProcedureData.map(item => item.ProcedureID); // 物料
				let EmplID = this.FilterFormData.EmplData.map(item => item.EmplID); // 物料

				return {
					PageSize: that.page.pageSize,
					OrderType: that.sortData.Sort['value'], // 排序顺序  
					OrderName: that.sortData.OrderBy, // 排序字段  
					FBDate: that.YMDDateFormate(that.FilterFormData.StartTime), // 开始日期  
					FEDate: that.YMDDateFormate(that.FilterFormData.EndTime), // 结束日期  
					FWorkshopID: FWorkshopID.join(','), // 车间  
					ProductID: ProductID.join(','), // 物料ID  
					ProcedureID: ProcedureID.join(','), // 工序ID  
					EmplID: EmplID.join(','), // 作业员ID  
					FCJType: that.FCJType,
					Timeout: that.FilterFormData.Timeout || 0,
				};
			},
			GetAllListInfo() { // 获取未审核、已审核数据，后处理
				let that = this;

				this.$utils.showLoading();
				that.CardLoadStatus = 'loading';
				that.AuditCardLoadStatus = 'loading';


				let obj1 = {
					Pageindex: that.page['pageIndex'],
					Approve: 0,
					...that.getCommonProperties()
				};

				let obj2 = {
					Pageindex: that.page['AuditPageIndex'],
					Approve: 1,
					...that.getCommonProperties()
				};

				try {
					let request1 = that.Request.PromiseRequest('XGD_DailyOutput', obj1);
					let request2 = null;

					let requestData1 = [];
					let requestData2 = [];

					request1.promise.then((data) => {
						request1.requestTask.abort(); // 取消第一个请求
						if (data.status == 200) {
							requestData1 = data.data;
							request2 = that.Request.PromiseRequest('XGD_DailyOutput', obj2);
							return request2.promise
						} else {

						}
					}).then((data) => {
						request2.requestTask.abort(); // 取消第二个请求
						if (data.status == 200) {
							requestData2 = data.data;

							that.CardListData.push(...requestData1.ds);
							that.AuditCardListData.push(...requestData2.ds);


							if (requestData1.ds1[0].Total != 0) {
								that.TabList[0]['value'] = requestData1.ds1[0].Total;
							} else {
								that.TabList[0]['value'] = 0
							}

							if (requestData2.ds1[0].Total != 0) {
								that.TabList[1]['value'] = requestData2.ds1[0].Total;
							} else {
								that.TabList[1]['value'] = 0
							}

							const count1 = that.CardListData.filter(item => item.Days > 24).length;
							// const count2 = that.AuditCardListData.filter(item => item.Days > 24).length;
							that.TabList[0]['badge']['value'] = count1;
							// that.TabList[1]['badge']['value'] = count2;

							that.page.pageIndex++;
							that.page.AuditPageIndex++;

							that.CardLoadStatus = 'loadmore';
							that.AuditCardLoadStatus = 'loadmore';



							if (that.CardListData.length == requestData1.ds1[0].Total) {
								that.CardLoadStatus = 'nomore';
							}

							if (that.AuditCardListData.length == requestData2.ds1[0].Total) {
								that.AuditCardLoadStatus = 'nomore';
							}

							this.$utils.hideLoading()

						} else {
							that.CardLoadStatus = 'nomore';
							that.AuditCardLoadStatus = 'nomore';

							this.$utils.hideLoading()
						}
					}).catch((error) => {

						if (request1) {
							request1.requestTask.abort(); // 取消第一个请求
						}
						if (request2) {
							request2.requestTask.abort(); // 取消第二个请求
						}

						this.$utils.hideLoading()
					});


				} catch (e) {
					//TODO handle the exception
					// console.log(JSON.stringify(e))
					this.$utils.hideLoading()
				}

			},
			ToWorkCardInfo(data) { // 编辑
				// console.log(JSON.stringify(data))
				uni.navigateTo({
					url: '/st_ticket/CreateWorks?FDailyOutputDeID=' + data.FDailyOutputDeID + '&Edit=' +
						'isEdit'
				})
			},
			ToTicket(data) { // 点击工单编号

				uni.navigateTo({
					url: '/st_ticket/TicketsInfo?WoOrderID=' + data.WoOrderID,
				})
			},
			ToAddWorkBtn() { // 新增
				uni.navigateTo({
					url: '/st_ticket/CreateWorks'
				})
			}
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box !important;
	}

	.u-tabs__wrapper__nav__item {
		flex: initial !important;
		min-width: 100px;
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #f2f2f2;
		display: flex;
		flex-direction: column;
		align-items: center;

		.icon-flip-vertical {
			display: inline-block;
			/* 或者其他适合你的布局的display值 */
			transform: scaleY(-1);
			/* 垂直翻转 */
		}

		// 顶部导航栏右侧样式
		.navRightBox {
			padding: 6rpx 8rpx;
			border-radius: 12px;
			color: #fff;
		}

		.MainBox {
			position: relative;
			flex: 1;
			overflow: auto;
			width: 100%;

			.KanbanBox {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-evenly;
				background-color: #fff;

				.Kanban_CardBox {
					width: 48%;
					margin-top: 14px;
					color: #fff;
					border-radius: 12px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 16rpx 0 16rpx 14rpx;
					overflow: hidden;
					position: relative;
					font-size: 12px;

					.Kanban_CardBox_Value {
						font-size: 40rpx;
						margin-top: 6rpx;
						font-weight: 600;
					}

					.Style_A {
						position: absolute;
						left: 0;
						top: 0;
						width: 24rpx;
						height: 24rpx;
						background-color: rgba(255, 255, 255, .18);
						border-radius: 0 2rpx 12rpx 0;
					}

					.Style_B {
						position: absolute;
						right: -38rpx;
						bottom: -30rpx;

						.Style_B_Round1 {
							position: relative;
							background-color: #fff;
							background-color: rgba(255, 255, 255, .15);
							width: 78rpx;
							height: 78rpx;
							border-radius: 9999px;

							.Style_B_Round2 {
								position: absolute;
								left: -20rpx;
								bottom: 14rpx;
								background-color: rgba(255, 255, 255, .15);
								width: 40rpx;
								height: 40rpx;
								border-radius: 9999px;
							}
						}
					}
				}
			}

			.u-sticky {
				background-color: #fff !important;
				top: 0 !important;
				box-shadow: 0 8px 11px -19px;
				height: 44px;
				z-index: 1 !important;

				.u-sticky__content {
					flex: 1;
				}
			}

			.CardBox {
				position: relative;
				margin-top: 20rpx;
				background-color: #fff;
				padding: 30rpx;
				border-radius: 12px;
				// min-height: 300px;
				box-shadow: 0 0 8px -7px #333;

				.Main_Card_Top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.OrdinalBox {
						width: fit-content;
						min-width: 24px;
						height: 24px;
						border-radius: 9999px;
						background-color: #51d0d0;
						color: #fff;
						font-size: 14px;
						line-height: 24px;
						text-align: center;
					}

					.Title_Text {
						margin-left: 6px;
						font-weight: 600;
						font-size: 14px;
					}
				}

				.CommonBox {
					border-radius: 8px;
					background-color: #f7f7f7;
					padding: 10px 10px;
					margin-top: 15px;
					display: flex;
					align-items: center;
					justify-content: space-evenly;

					.TextBox {
						display: flex;
						flex-direction: column;
						align-items: center;
						flex: 1;
					}

					.BottomText {
						margin-top: 14px;
					}

					.LeftIcon {
						width: 30px;
						height: 30px;
						line-height: 30px;
						font-size: 18px;
						border-radius: 8px;
						color: #fff;
						background-color: #01b87d;
						text-align: center;
					}

					.CenterBox {
						flex: 1;
						border-radius: 8rpx;
						padding: 2rpx 10rpx;
					}
				}

			}
		}
	}


	.MainPopup {

		.u-transition {
			z-index: 9999999 !important;
		}

		// 筛选弹层
		.FilterMainBox {
			padding: 20rpx 30rpx !important;
			flex: 1;
			overflow: auto;
			padding-bottom: 20px;

			.TitleBox {
				font-size: 14px;
				margin-bottom: 20rpx;
			}

			// 时间选择样式
			.Select_Box {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;

				.Select_Date {
					justify-content: space-between;
					padding: 6px 12px;
					background-color: #f0f0f0;
					border: 1px solid #f0f0f0;
					border-radius: 9999px;
					width: 46%;
					margin-top: 8px;
				}

				.Select_Date_Active {
					background-color: #e1f7f8 !important;
					border: 1px solid #51d0d0 !important;
					color: #51d0d0 !important;
				}

				// 起止时间
				.ChoiceTimesBox {
					width: 100%;
					display: flex;
					align-items: center;
					// background-color: #fff;
					padding: 10px 20px;
					margin-top: 6px;

					.TimeBox {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						// margin-left: 10px;

						.timer {
							width: 100%;
							flex: 2;
							display: flex;
							flex-direction: column;
							// align-items: center;
							font-size: 16px;
							color: #333;

							text:first-child {
								margin-bottom: 10px;
								font-weight: 600;
							}

							text:last-child {
								height: 20px;
							}

							.Date_Text {
								color: #999;
								font-size: 14px;
							}
						}

						.Icon {
							flex: 1;
						}
					}
				}

			}


		}


		.ProgressBox {
			display: flex;
			flex-direction: column;
			padding: 20px;
			min-width: 70vw;
			position: relative;

			.Type {
				border-radius: 14px;
				font-weight: 600;
				padding: 4px 8px;
				font-size: 14px;
				position: absolute;
				top: 16px;
				right: 20px;
				// background-color: #e5e5e5;
				// color: #333;
			}

			// 未报工
			.Type_0 {
				background-color: #e8e8e8;
				color: #3c3c3c;
			}

			// 已完成
			.Type_1 {
				background-color: #d9f5ec;
				color: #269b74;
			}

			// 指定完成
			.Type_-1 {
				background-color: #f5fccd;
				color: #d0d30b;
			}

			// 部分报工
			.Type_2 {
				background-color: #d7eefc;
				color: #1d87cf;
			}

			.TitleName {
				font-size: 16px;
				font-weight: 600;
				color: #333;
			}
		}

		.MainBox {
			padding: 0px 2px;
			flex: 1;
			overflow: auto;
		}

		.PopupBottomBox {
			justify-content: space-evenly;
			padding: 8rpx 8rpx;
			border-top: 1px solid #ececec;

			button {
				width: 44%;

				&:first-child {
					background-color: #fff;
					color: #51d0d0;
					border: 1px solid #51d0d0;
				}

				&:last-child {
					background-color: #51d0d0;
					color: #fff;
				}
			}
		}

	}

	// 时间选择器
	.DateTimerPick {

		.u-transition {
			z-index: 9999999 !important;
		}
	}

	// 复选框样式 start
	.uni-checkbox-input {
		border: 2px solid #d1d1d1 !important;
	}

	.uni-checkbox-input-checked {
		background: #51d0d0;
		color: #fff !important;
		border-color: #51d0d0 !important;
	}

	// 复选框样式 End
</style>